<%--
  Created by IntelliJ IDEA.
  User: jaft
  Date: 2018/7/11
  Time: 下午7:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <title>会员分析</title>
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
    <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="/static/bootstrap-3.3.7/js/jquery.min.js"></script>

    <script>
        $(function () {

            // 默认
            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: '会员性别占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '会员性别占比',
                    data: [
                        ['男', ${manGenger}],
                        {
                            name: '女',
                            y: ${womenGenger},
                            sliced: true,  // 默认突出
                            selected: true // 默认选中
                        }
                    ]
                }]
            });

        });

        // 性别
        function gender() {

            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: '会员性别占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '会员性别占比',
                    data: [
                        ['男', ${manGenger}],
                        {
                            name: '女',
                            y: ${womenGenger},
                            sliced: true,  // 默认突出
                            selected: true // 默认选中
                        }
                    ]
                }]
            });
        }

        // 来源
        function resource() {
            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: '会员来源占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '会员来源占比',
                    data: [
                        ['线下', ${resource1}], ['线上', ${resource2}]
                    ]
                }]
            });
        }

        // 等级
        function memLevel() {
            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: '会员等级占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '会员等级占比',
                    data: [
                        ['普通会员', ${level1}], ['中级会员', ${level2}], ['高级会员', ${level3}], ['VIP会员', ${level4}],
                        ['黄金会员', ${level5}], ['铂金会员', ${level6}], ['至尊会员', ${level7}], ['无量会员', ${level8}]
                    ]
                }]
            });
        }

        // 分组
        function group() {

            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: '会员分组占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '会员分组占比',
                    data: [
                        ['普通客人', ${group1}], ['熟客', ${group2}]
                    ]
                }]
            });
        }

        // 标签
        function tag() {
            var chart = Highcharts.chart('container', {
                chart: {
                    type: 'pie',
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                },
                title: {
                    text: '会员标签占比'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '会员标签占比',
                    data: [
                        ['善良', ${tag1}], ['抠门', ${tag2}], ['人品好', ${tag3}],
                        ['有礼貌', ${tag4}], ['傻', ${tag5}], ['有钱', ${tag6}]
                    ]
                }]
            });
        }

    </script>

</head>


<body style="background-color: #f0f0f0">

<div style="width: 100%;height: 140px">

    <div style="float: left; background-color: white; width: 20%; height: 120px">
        <div style="padding-top: 10px; padding-left: 10px">新增会员数</div>
        <div style="padding-top: 15px; text-align: center; font-size: 30px">${count}人</div>
    </div>

    <div style="float: left; background-color: white; width: 20%; height: 120px; margin-left: 10px">
        <div style="padding-top: 10px; padding-left: 10px">会员等级</div>
        <div style="padding-top: 15px; text-align: center; font-size: 14px; color: red">普通会员:${memberCout1}人</div>
        <div style="padding-top: 5px; text-align: center; font-size: 14px; color: red">高级会员:${memberCout2}人</div>
    </div>

    <div style="float: left; background-color: white; width: 20%; height: 120px; margin-left: 10px">
        <div style="padding-top: 10px; padding-left: 10px">会员来源</div>
        <div style="padding-top: 15px; text-align: center; font-size: 14px; color: red">线上:${res1}人</div>
        <div style="padding-top: 5px; text-align: center; font-size: 14px; color: red">线下:${res2}人</div>
    </div>

</div>

<br>
<div>
    <div>
        <div style="height:76%;width:10%;background: white; float: left">
            <button style="height:30px;width:60px; margin-left: 20px;margin-top: 20px" onclick="gender()">性别</button>
            <button style="height:30px;width:60px; margin-left: 20px;margin-top: 5px" onclick="memLevel()">等级</button>
            <button style="height:30px;width:60px; margin-left: 20px;margin-top: 5px" onclick="resource()">来源</button>
            <button style="height:30px;width:60px; margin-left: 20px;margin-top: 5px" onclick="group()">分组</button>
            <button style="height:30px;width:60px; margin-left: 20px;margin-top: 5px" onclick="tag()">标签</button>
        </div>

        <div id="container" style="background-color: white; width: 90%; height: 76%; float: left">

        </div>
    </div>
</div>


</body>
</html>
